<template>
  <div>
    <ShareCard :loading="isLoading" :cardData="cardData" :showTitle="showTitle">
      <template #title>
        <div> <Icon :icon="icon" v-if="icon" :size="18" class="mr-2" />{{ header }}</div>
      </template>
      <template v-if="dataSource?.length > 0">
        <div class="flex justify-between flex-wrap">
          <div
            v-for="item in dataSource"
            :key="item.id"
            class="flex justify-between mb-3 pt-5 item-box"
            @click="handleGo(item)"
            style="border-radius: 8px"
          >
            <div
              v-if="item.bgMode != 1"
              :style="[
                {
                  height: '70px',
                  width: '70px',
                },
              ]"
              class="flex justify-center cursor-pointer mt-2 mb-5"
            >
              <div class="flex flex-col justify-center items-center">
                <div
                  class="text-center"
                  :style="[
                    {
                      borderRadius: '16px',
                      backgroundColor: item.bgColor ? colorToRGB(item.bgColor, 0.05) : '#fff',
                    },
                  ]"
                >
                  <svg
                    class="portal-fa"
                    aria-hidden="true"
                    :style="[{ padding: '12px 12px', width: '55px', height: '55px' }]"
                  >
                    <use :xlink:href="`#${item.icon}`" />
                  </svg>
                </div>
                <div class="text-center mt-2">
                  {{ item.title }}
                </div>
              </div>
            </div>
            <div
              v-else
              :style="[
                {
                  height: '65px',
                  width: '70px',
                },
              ]"
              class="flex justify-center cursor-pointer mt-2 mb-5"
            >
              <div class="flex flex-col justify-center items-center">
                <div
                  class="text-center"
                  :style="[
                    {
                      borderRadius: '16px',
                      backgroundImage:
                        item.bgColorCustom +
                        (item.bgImage ? ',url(/resource/images/bg/' + item.bgImage + ')' : ''),
                      backgroundSize: '100% 100%, cover',
                      backgroundPosition: '0 0, center',
                      backgroundRepeat: 'no-repeat',
                      backgroundBlendMode: 'hue',
                    },
                  ]"
                >
                  <svg
                    class="portal-fa"
                    aria-hidden="true"
                    :style="[{ padding: '12px 12px', width: '55px', height: '55px' }]"
                  >
                    <use :xlink:href="`#${item.icon}`" />
                  </svg>
                </div>
                <div class="text-center mt-2">
                  {{ item.title }}
                </div>
              </div>
            </div>
          </div>
          <i
            v-for="(_, index) in dataSource.length"
            :key="`i${index}`"
            :style="[{ height: '0', width: '90px' }]"
          ></i>
        </div>
      </template>
      <template v-else>
        <Empty :image="simpleImage" />
      </template>
    </ShareCard>
    <ProcessDrawer @register="registerProcessDrawer" />
  </div>
</template>
<script lang="ts" setup>
  import { ref, watch, onMounted, defineExpose } from 'vue';
  import { Card, Empty, Tooltip, Row, Col } from 'ant-design-vue';
  import { useGo } from '/@/hooks/web/usePage';
  import Icon from '/@/components/Icon/index';
  import { getListCardByApplication } from '/@/api/system/system';
  import { getFlowInit } from '/@/api/process/process';
  import { useDrawer } from '/@/components/Drawer';
  import ProcessDrawer from '../../../pages/processManagement/processDrawer.vue';
  import ShareCard from './ShareCard.vue';
  import { colorToRGB } from '/@/utils/utils';

  const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
  const [registerProcessDrawer, { openDrawer: openProcessDrawer }] = useDrawer();

  // 抛出事件
  const emit = defineEmits<{
    (e: 'loaded', len: number): void;
  }>();

  const props = defineProps({
    loading: Boolean,
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '300px',
    },
    icon: {
      type: String as PropType<string>,
      default: '',
    },
    formCode: {
      type: String as PropType<string>,
      default: '',
    },
    header: {
      type: String as PropType<string>,
      default: '',
    },
    pageSize: {
      type: Number,
      default: 6,
    },
    portalId: {
      type: Number,
      default: -1,
    },
    cardData: {
      type: Object as PropType<object>,
      default: () => {
        return {};
      },
    },
    showTitle: {
      type: Boolean,
      default: true,
    },
  });
  const isLoading = ref(false);
  const dataSource = ref<Recordable>([]);
  const fetch = () => {
    isLoading.value = true;
    getListCardByApplication({ id: props.portalId, count: props.pageSize })
      .then((res) => {
        dataSource.value = res || [];
      })
      .finally(() => {
        isLoading.value = false;
      });
    console.log('dataSource.value.lenth', dataSource.value.length);
    emit('loaded', dataSource.value.length);
  };
  onMounted(() => {});
  const go = useGo();
  const handleGo = (item) => {
    if (item.type == 'flow_launch') {
      launchFlow(item.flowType, item.flowOpStyle);
    } else {
      if (item.url != null && item.url != '') {
        if (item.url.indexOf('http') == 0) {
          window.open(item.url);
        } else {
          go({ path: item.url, query: item.query });
        }
      }
    }

    console.log('dataSource.value', dataSource.value);
  };

  function launchFlow(typeCode, flowOpStyle) {
    getFlowInit({ typeCode }).then((res) => {
      let myActionId = res.myActionId || '';
      let flowId = res.flowId || '';
      let type = res.type || 2;
      if (myActionId) {
        if (flowOpStyle == 1) {
          let title = flowId + '-' + res.flowTitle;
          if (title.length > 18) {
            title = title.substring(0, 18) + '...';
          }
          if (type == 2) {
            go({
              path: '/processHandle',
              query: {
                myActionId: myActionId,
                isFromProcess: true,
                title: title,
                cacheName: `processHandle${flowId}`,
              },
            });
          } else {
            go({
              path: '/processHandleFree',
              query: {
                myActionId: myActionId,
                isFromProcess: true,
                title: title,
                cacheName: `processHandle${flowId}`,
              },
            });
          }
        } else {
          openProcessDrawer(true, {
            myActionId: myActionId,
            type,
          });
        }
      }
    });
  }

  watch(
    () => props.portalId,
    () => {
      console.log('props.portalId', props.portalId);
      fetch();
    },
    { immediate: true },
  );
</script>
<style scoped>
  .portal-fa {
    padding: 0 20px;
    font-size: 40px;
    /* opacity: 0.8; */
  }
  .module-fa {
    padding: 0 20px;
    font-size: 30px;
    opacity: 0.7;
  }

  .item-box:hover {
    color: #4285f2;
    /* box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.053); */
    /* background: #f2f2f2; */
  }
</style>
